<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>营业网点</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<link rel="stylesheet" href="../../src/dist/css/page.css">

<body>
<!-- 容器 -->
<div class="weui-tab csrq-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
            列表模式
        </a>
        <a class="weui-navbar__item" href="#tab2" onclick="clickShowMap()">
            地图模式
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="map-list" id="mapListDemo"></div>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
            <div id="allMapDemo" class="map-demo"></div>
        </div>
    </div>
</div>
<!--<div class="weui-cells news-List">
    <div class="weui-cells__tips">通知公告</div>
    <div class="weui-cells" id="listDemo">
        <img src="../../src/dist/img/nodata.png" alt="" class="nodataImg">
    </div>
</div>-->

<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!--百度地图map-->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862"></script>
<!-- Dist -->
<script src="../../src/dist/js/index.js"></script>
<script src="../../src/dist/js/utils.js"></script>
<script src="../../src/dist/js/request.js"></script>
<script src="../../src/dist/js/getLocation.js"></script>
<script>
    var listData = [],
		customid = '';
    var coorLocation = {"longitude":"116.404","latitude":"39.915"};//当前坐标
    var map = new BMap.Map("allMapDemo");    // 创建Map实例;

    $(function(){
        //getdataList()   //真实接口数据
		getdataListPHP() // 本地测试数据
    })
    function clickShowMap() {
        setTimeout(function () {
            let pt = new BMap.Point(coorLocation.longitude, coorLocation.latitude);
            map.centerAndZoom(pt, 15)
        },1000)
    }

    function getdataListPHP() {
        $.ajax({
            type: "POST",
            url: "../../src/php/requestOnline.php",
            data: {
                act: 'CSRQ_getdataSaleNetwork'
            },
            success: function (data) {
                data = eval('(' + data + ')')
				listData = data
                createListDemo()
            },
            error: function (data) {

            }
        });
	}
    function getdataList() {
        get("/wechat/outlets/getList" , {}, function (data) {
            if (data.code === 0) {
				listData = data.data
                if(data.data.length ===0 ){
					$.toast('暂无数据!', 'text');
                	return
                }
                createListDemo()
            } else {
                $.toast('获取通知公告失败!', 'forbidden');
            }
        }, false, true);
	}
	function createListDemo(){
			let d = listData
			let h = ''
			for (let [index, item] of d.entries()) {
                h += '<div class="maplist-card">\n' +
                    '    <div class="title">'+item.name+'</div>\n' +
                    '      <div class="c1">\n' +
                    '         <i class="iconfont icondizhi"></i>\n' +
                    '         <span>\n' +
                    '            '+item.address+'\n' +
                    '         </span>\n' +
                    '      </div>\n' +
                    '      <div class="c1">\n' +
                    '         <i class="iconfont iconshijian"></i>\n' +
                    '         <span>\n' +
                    '           '+(item.businessh === null ?'' :item.businessh)+'\n' +
                    '         </span>\n' +
                    '      </div>\n' +
                    '      <div class="c1">\n' +
                    '         <i class="iconfont icondianhua"></i>\n' +
                    '         <span>\n' +
                    '            '+item.phone+'\n' +
                    '         </span>\n' +
                    '       </div>\n' +
                    '  </div>'
			}
			$("#mapListDemo").html(h)
        // 加载地图
        loadMapFun()
    }
    function loadMapFun() {
        /*//此处就是返回的地理位置信息
        coorLocation.longitude = "118.058528"
        coorLocation.latitude = "36.841868"
        //alert(JSON.stringify(res))
        // 百度地图API功能
        map.centerAndZoom(new BMap.Point(coorLocation.longitude, coorLocation.latitude), 15);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        map.setCurrentCity('淄博市');          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        //标注覆盖物所使用的图
        var pt = new BMap.Point(coorLocation.longitude, coorLocation.latitude);
        var myIcon = new BMap.Icon("../../src/dist/img/address.png", new BMap.Size(32,32),{
            imageSize: new BMap.Size(30,30) // 图标所用的图片的大小
        });

        var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
        map.addOverlay(marker2);              // 将标注添加到地图中
        // 加载网点
        mapLoadSalePoint()

        return*/

        //调用获取所在坐标
        var local = new Location();
        local.getLocation(function(res){
            //此处就是返回的地理位置信息
            coorLocation.longitude = res.lng
            coorLocation.latitude = res.lat
            //alert(JSON.stringify(res))
            // 百度地图API功能
            map = new BMap.Map("allMapDemo");    // 创建Map实例
            var pt = new BMap.Point(coorLocation.longitude, coorLocation.latitude);
            map.centerAndZoom(pt, 15);  // 初始化地图,设置中心点坐标和地图级别

            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes:[
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]}));
            map.setCurrentCity(res.city);          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            //标注覆盖物所使用的图

            var myIcon = new BMap.Icon("../../src/dist/img/address.png", new BMap.Size(32,32),{
                imageSize: new BMap.Size(32,32) // 图标所用的图片的大小
            });

            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            map.addOverlay(marker2);              // 将标注添加到地图中

            // 加载网点
            mapLoadSalePoint()
        })
    }

    function mapLoadSalePoint() {
        let d = listData

        for (let [index, item] of d.entries()) {
            let pt = new BMap.Point(item.longitude, item.latitude);
            let myIcon = new BMap.Icon("../../src/dist/img/address2.png", new BMap.Size(26,26),{
                imageSize: new BMap.Size(26,26) // 图标所用的图片的大小
            });

            let marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
            console.log(item.longitude, item.latitude)
            map.addOverlay(marker);              // 将标注添加到地图中

            // 标注点说明信息
            let label = new BMap.Label('',{offset:new BMap.Size(20,-40)});

            label.setContent('<div style="width: 100px;white-space: normal;padding: 3px;">'+item.title+'</div>')
            marker.setLabel(label);
            // 点击标注点显示具体信息
            var opts = {
                width : 200,     // 信息窗口宽度
                minHeight: 100,     // 信息窗口高度
                title : "营业点详情" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            }
            let c='<div style="padding: 6px 1px;"> ' +
                '<div style="font-weight: bold;font-size: 0.78rem;">'+item.title+'</div>' +
                '<div style="font-size: 0.7rem;margin-top: 5px;"><i class="iconfont icondizhi" style="color:#29B6F6;margin-right: 5px;"></i>'+item.address+'</div>' +
                '<div style="font-size: 0.7rem;margin-top: 5px;"><i class="iconfont iconshijian" style="color:#29B6F6;margin-right: 5px;"></i>'+item.time+'</div>' +
                '<div style="font-size: 0.7rem;margin-top: 5px;"><i class="iconfont icondianhua" style="color:#29B6F6;margin-right: 5px;"></i>'+item.phone+'</div>' +
                '</div>'
            var infoWindow = new BMap.InfoWindow(c, opts);  // 创建信息窗口对象
            marker.addEventListener("click", function(){
                map.openInfoWindow(infoWindow,pt); //开启信息窗口
            });
        }
    }
</script>
</body>
</html>
